// 根组件
import React, { Component } from 'react'
import logo from './img/logo512.png'
import "./App.css"

// 1从React.Component对象创建类组件
// class App extends React.Component {
// }

//2 从 Component对象创建类组件
class App extends Component {

  // render() {

  //   let h1 = React.createElement('h1', { style: { color: 'red' } }, 'App组件22');
  //   let sex = 'man'
  //   let s1 = "box1"
  //   let handler1 = () => {
  //     console.log(`output->11`, 11)
  //   }
  //   // 把css声明为一个变量对象，再绑定。
  //   let sytle1 = { color: 'blue' };
  //   return (
  //     // 必须使用{}来绑定数据
  //     <div id={s1}>
  //       title: {h1}

  //       <p>sex: {sex}</p>
  //       <button onClick={handler1}>click me</button>
  //       <div className={sex ? 'box' : 'box1'}>
  //         <img src={logo} width="100" />
  //       </div>
  //       {/* 或者之间字面量一个CSS 对象 */}
  //       <div style={{ 'backgroundColor': 'blue', 'color': 'white' }}>显示style得语法</div>
  //     </div >
  //   );

  // }



  constructor(props) {
    super(props)
    // 状态的声明， 状态是一个对象，每一个state对象的属性，就是要再页面和逻辑中使用的变量。（任意类型的变量）
    this.state = {
      isLogin: false
    }
  }
  render() {
    // render()里面声明得变量，再改变时，不能实现页面得响应式渲染； 
    let isLogin = true;

    // *** 如果根节点是一个HTML 元素，这里得条件渲染要使用 {}；
    // *** 如果没有div这个根元素，这不写{}.
    return (
      <div>
        <button type='button' onClick={() => {
          // isLogin = !isLogin
          // 状态的修改：
          this.setState({
            isLogin: !this.state.isLogin
          })
          console.log(`output->isLogin`, isLogin)
        }}>switch</button>
        {/* 状态的使用： */}
        {this.state.isLogin ? <LoginView /> : <RegisterView />}
      </div>
    );
  }
}

class LoginView extends Component {
  render() {
    return (
      <div>
        <h1>log in</h1>
        <img src={logo} />

      </div>
    );
  }
}

class RegisterView extends Component {
  render() {
    return (
      <div>
        <h1>Register</h1>
      </div>);
  }
}

export default App;